<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type='text/javascript' src='../vue.js'></script>
    
</head>
<body>
    <div id="root">
        <label for="account">账号</label>
        <input type="text" v-model.number.trim.lazy=formInfo.account></input>
        <br>
        <label for="password">密码</label>
        <input type="password" v-model=formInfo.password></input>
        <br>
        年龄: <input type="text" v-model.number.trim=formInfo.age>
        <br>
        性别: <input type="radio" name="sex" value="male" v-model=formInfo.sex>男</input>
             <input type="radio" name="sex" value="famale" v-model=formInfo.sex>女</input>
        <br>
        爱好: <input type="checkbox" value="smoke" v-model=formInfo.hobbys> 抽烟 </input>
             <input type="checkbox" value="drink" v-model=formInfo.hobbys> 喝酒 </input>
             <input type="checkbox" value="hair" v-model=formInfo.hobbys> 烫头 </input>
        <br> 
        所属校区: 
        <select name="school" id="select" value="" v-model=formInfo.school>
            <option value="">请选择校区</option>
            <option value="shanghai">上海校区</option>
            <option value="beijing">北京校区</option>
            <option value="guangzhou">广州校区</option>
            <option value="shengzheng">深圳校区</option>
        </select>
        <br>
        其他信息: <textarea name="info" id="info" placeholder="输入其他信息" v-model.trim=formInfo.otherInfo></textarea>
        <br>
        <input type="checkbox" v-model=formInfo.acceptMe> 阅读并接受 </input> <a href="https://www.bilibili.com">阅读并接受</a>
        <br>
        <button @click=commit>提交</button>
    </div>
    <script type='text/javascript'>
        new Vue({ 
            el: '#root',
            data: {
                formInfo:{
                    account: "",
                    password: "",
                    age:null,
                    sex: null,
                    hobbys: [],
                    school: "",
                    otherInfo: "",
                    acceptMe:false
                }
            },
            methods: {
                commit(){
                    console.log(this.formInfo)
                }
            },
        })
    </script>
    
</body>
</html>